import 'package:flutter/material.dart';
import 'package:hockey/extensions/jzx_widget_extension.dart';
import 'package:hockey/jzx_apps.dart';
import 'package:hockey/services/jzx_app.dart';
import 'package:hockey/services/jzx_user.dart';

import 'controller.dart';

class JzxSettingsView extends GetView<JzxSettingsController> {
  const JzxSettingsView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: const JzxAAppBar(title: 'SETTING'),
      body: Column(
        children: [
          Assets.images.appLogo
              .image(width: 66.w)
              .paddingOnly(top: kNavigationBarHeight + 8.w),
          _Cell(
            left: Text('ID：${JzxUserService.to.uid}',
                style: myAppColors.white.font_16),
            right: Assets.images.icCopy.image(width: 16.w),
            onTap: () {
              JzxAppService.clipboard(JzxUserService.to.uid);
            },
          ),
          _Cell(
            left: Text('Auto Translate', style: myAppColors.white.font_16),
            right: InkWell(
              onTap: () {
                controller.openOrCloseAutoTranslate();
              },
              child: Obx(() => controller.isOpen.value
                  ? Assets.images.icSwitchOpen.image(height: 22.w)
                  : Assets.images.icSwitchClose.image(height: 22.w)),
            ),
            top: 20.w,
          ),
          _Cell(
            left: Text('Logout', style: myAppColors.white.font_16),
            right: Assets.images.icLogout.image(width: 16.w),
            top: 20.w,
            onTap: () {
              JzxLogPvManger.tracking(page: JzxLogPages.logout);
              JzxUserService.to.logout();
            },
          ),
          _Cell(
            left: Text('Delete Account', style: myAppColors.white.font_16),
            right: Assets.images.icLogout.image(width: 16.w),
            top: 20.w,
            onTap: () {
              JzxLogPvManger.tracking(page: JzxLogPages.deleteaccount);

              JzxUserService.to.unsubscribeUser();
            },
          ),
        ],
      ).backgroud(Assets.images.normalBgv),
    );
  }
}

class _Cell extends StatelessWidget {
  const _Cell({
    super.key,
    required this.left,
    required this.right,
    this.top,
    this.onTap,
  });

  final Widget left;
  final Widget right;

  final double? top;

  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        height: 44.w,
        width: double.infinity,
        alignment: Alignment.center,
        margin: EdgeInsets.only(left: 32.w, right: 32.w, top: top ?? 40.w),
        padding: const EdgeInsets.symmetric(horizontal: 21),
        decoration: BoxDecoration(
          color: const Color(0x26FFFFFF),
          borderRadius: BorderRadius.circular(12),
        ),
        child: Row(
          children: [
            Expanded(child: left),
            JzxGaps.w10,
            right,
          ],
        ),
      ),
    );
  }
}
